import React, { Component } from 'react'
import './index.css';
export default class index extends Component {
    render() {
        return (
            <div className="todo-footer">
            <label>
                {/* every 数组方法  会遍历每一个数组  如果每一数组返回值都为true 就返回  true  否则返回false */}
                <input type="checkbox" checked = {this.props.data.every(item => item.done)} onChange={this.checkAll}/>
            </label>
            <span>
                {/* filter  返回满足添加的值  并形成一个新的数组 */}
                <span>已完成{this.props.data.filter(item => item.done).length}</span> / 全部{this.props.data.length}
            </span>
            <button className="btn btn-danger" onClick = {this.clear}>清除已完成任务</button>
        </div>
        )
    }
    checkAll = (e)=>{
        let status = e.target.checked;
        this.props.checkedAll(status);
    }
    clear = ()=>{
        this.props.cleardata();
    }
}
